<template>
	<view class="page">
		<view class="box">
			<view style="text-align: center;margin-bottom: 250rpx;">
				<image :showLoading="true" src="@/static/log.png" width="80px" height="80px"></image>
				<view style="clear: both;margin-bottom: 20rpx;"></view>
				<text>则秀运动</text>
			</view>


			<u--form labelPosition="left" :model="model1" ref="form1" labelWidth="100rpx"
				:labelStyle="{ fontSize: '26rpx', borderRight: '1rpx solid #f5f5f5' }">
				<u-form-item label="+86" prop="phone" borderBottom><u--input v-model="model1.phone" placeholder="请输入手机号"
						border="none"></u--input></u-form-item>
				<u-form-item label="验证码" prop="number" borderBottom>
					<u--input placeholder="请输入验证码" border="none" v-model="model1.number"></u--input>
					<view slot="right" class="input_right">
						<image src="../../static/image/phone.png"
							style="width: 30rpx;height: 30rpx;vertical-align: middle;"></image>
						<text @click="getSms">{{
                  disabledCode == 0
                  ? "获取验证码"
                  : disabledCode + "秒后获取"
                }}</text>
					</view>
				</u-form-item>
			</u--form>


			<view class='width-160' style="margin-top: 20rpx;"><u-button :disabled='loginShow'
					:text="loginShow?'登录中':'验证并登录'" color=" rgb(66, 83, 216)" @click="sumbit"></u-button>
			</view>
			<view class='width-160' style="margin-top: 20rpx;"><u-button text="一键登录" :disabled='loginShow'
					@click="jump"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				model1: {
					phone: "",
					number: ""
				},
				loginShow: false,
				disabledCode: 0,
				disabled: false,
				interval: null,
				loginCode: null,
				rules: {
					'phone': [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '请填写正确手机号',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'number': [{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}],

				},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
			uni.login({
				provider: 'weixin', //使用微信登录
				success: loginRes => {
					this.loginCode = loginRes.code;
				}
			});
		},
		destroyed() {
			clearInterval(this.interval);
		},
		methods: {
			getCode() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						this.loginCode = loginRes.code
						this.getOpenidAndSession()
					},
					fail: (err) => {
						uni.hideLoading()
					}
				});
			},
			getOpenidAndSession() {
				this.$api.Login.Session({
					code: this.loginCode
				}).then(res => {
					uni.setStorageSync('openid', res.data.openid);
				}).catch(err => {
					uni.hideLoading()
				})
			},
			jump() {
				uni.redirectTo({
					url: '/Login/loginPage'
				})
			},
			getSms() {
				if (this.disabled) return
				if (this.loginShow) return
				if (this.disabledCode != 0) return
				if (!this.model1.phone) {
					this.$u.toast('请输入手机号')
					return
				}
				if (!uni.$u.test.mobile(this.model1.phone)) {
					this.$u.toast('请填写正确手机号')
					return
				}
				this.disabled = true
				this.$api.Login.SendSms({
					mobile: this.model1.phone,
					scene: 'login'
				}).then(res => {
					this.disabled = false
					this.$u.toast('发送成功')
					this.disabledCode = 120;
					this.interval = setInterval(() => {
						if (this.disabledCode <= 1) {
							clearInterval(this.interval);
						} else {
							this.disabledCode--;
						}
					}, 1000);
				}).catch(err => {
					this.disabled = false
					this.$u.toast('发送失败')
					clearInterval(this.interval);
					this.disabledCode = 0;
				})


			},
			sumbit() {
				if (this.loginShow) return
				const obj = {
					mobile_code: this.model1.number,
					mobile: this.model1.phone
				}

				this.$refs.form1.validate().then(res => {
					this.loginShow = true
					this.getCode()
					this.$api.Login.SmsLogin(obj).then(res => {
						uni.setStorageSync('token', res.data.token);
						this.$api.My.Detail().then(my => {
							uni.setStorageSync('user', my.data);
							uni.reLaunch({
								url: uni.getStorageSync('pageUrl')
							})
							this.loginShow = false
						});
					}).catch(err => {
						this.$u.toast('登录失败')
						this.loginShow = false
					})
				}).catch(errors => {})

			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		color: #010101;
		font-size: 26rpx;
	}


	image {
		width: 126rpx;
		height: 126rpx;
	}

	.box {
		height: 800rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;


	}

	.width-160 {
		width: calc(100% - 160rpx);
	}
</style>